import React, { useState } from 'react';
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
import { StyleSheet, View, Text, ScrollView, Alert } from "react-native";
import { CreditCardInput } from "@react-native-ohos/react-native-credit-card-input";

export const ReactNativeCreditCardInputTest = () => {
  return (
    <ScrollView>
      <Tester style={{ flex: 1 }}>
        <TestSuite name="CreditCardInput1">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 autoFocus 属性设置，自动聚焦到当前框">
            <View>
              <CreditCardInput autoFocus={true} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput2">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 onChange 属性，获取填写值">
            <CreditCardInputOnChange />
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput3">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 labels 属性，修改labels值">
            <View>
              <CreditCardInput labels={{ number: "numberTest", expiry: "expiryTest", cvc: "cvcTest" }} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput4">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 placeholders 属性，设置默认占位值">
            <View>
              <CreditCardInput placeholders={{ number: "2222 2222 2222 2222", expiry: "12/12", cvc: "888" }} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput5">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 labelStyle 属性，设置标签样式为黄色">
            <View>
              <CreditCardInput labelStyle={s.label} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput6">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 inputStyle 属性，设置输入框样式为黄色">
            <View>
              <CreditCardInput inputStyle={s.input} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput7">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中 placeholderColor 属性，设置占位字符颜色为黄色">
            <View>
              <CreditCardInput placeholderColor={"yellow"} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput8">
          <TestCase
            tags={['C_API']}
            itShould="CreditCardInput中onFocusField属性，当字段获得焦点时调用回调函数">
            <View>
              <OnFocus />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CreditCardInput9">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 style 属性，组件容器的自定义样式。">
            <View>
              <CreditCardInput style={s.style} />
            </View>
          </TestCase>
        </TestSuite>
      </Tester>
    </ScrollView>
  );
};
function CreditCardInputOnChange() {
  const [formData, setFormData] = React.useState([])
  const _onChange = (formData) => {
    setFormData(formData)
  };
  return (<View>
    <CreditCardInput onChange={_onChange} />
    <Text>number:{formData.values.number}</Text>
    <Text>expiry:{formData.values.expiry}</Text>
    <Text>cvc:{formData.values.cvc}</Text>
  </View>)
}

const s = StyleSheet.create({
  switch: {
    alignSelf: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  container: {
    backgroundColor: "#F5F5F5",
    marginTop: 60,
  },
  label: {
    color: "yellow",
    fontSize: 12,
  },
  input: {
    fontSize: 16,
    color: "yellow",
  },
  inputContainerStyle: {
    borderBottomWidth: 10,
    borderBottomColor: "yellow",
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: 'yellow',
    borderRadius: 5,
    padding: 10,
    marginTop: 10,
  },
  style: {
    backfaceVisibility: 'hidden', // 背面是否可见
    backgroundColor: "#000000", // 背景颜色
    borderBlockColor: "#ffffff",
    borderBlockEndColor: "#ffffff",
    borderBlockStartColor: "#ffffff",
    borderBottomColor: "#ffffff",
    borderBottomEndRadius: '12',
    borderBottomLeftRadius: "11",
    borderBottomRightRadius: "13",
    borderBottomStartRadius: "14",
    borderColor: "#ffffff",
    // for android
    pointerEvents: 'none',
    isolation: 'auto',
    cursor: 'pointer',
    boxShadow: undefined,
    mixBlendMode: 'multiply'
  },
});

function OnFocus() {
  const [field, setFocusing] = React.useState([])
  const _onFocus = (field) => {
    setFocusing(field)
  };

  return (
    <View>
      <CreditCardInput onFocusField={_onFocus} />
      <Text>onFocusField:{field}</Text>
    </View>
  )
}